<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org"  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <title>资金统计模块</title>
    <!-- Bootstrap core CSS -->
    <link href="../static/asserts/css/bootstrap.min.css" th:href="@{/asserts/css/bootstrap.min.css}" rel="stylesheet">
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js"></script>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="../static/asserts/css/dashboard.css" th:href="@{/asserts/css/dashboard.css}" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://lib.baomitu.com/echarts/5.0.2/echarts.common.js"></script>
    <style type="text/css">
        /* Chart.js */

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }
    </style>
</head>

<body>
<div th:replace="sidbar::#topbar"></div>
<div class="container-fluid">
    <div class="row">
        <div th:replace="sidbar::#sbar"></div>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">

            <div class="chartjs-size-monitor"
                 style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                <div class="chartjs-size-monitor-expand"
                     style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                    <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
                </div>
                <div class="chartjs-size-monitor-shrink"
                     style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                    <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
                </div>
            </div>
            <button id="z" class="btn-success" onclick="getMoneyByDate(img=1)">查看收入</button>
            <button id="f" class="btn-success" onclick="getMoneyByDate(img=2)">查看支出</button>
            <button id="sum" class="btn-success" onclick="getMoneyByDate(img=3)">查看总计</button>
            <div id="main1" style="width: 600px;height:400px;"></div>
            <br/>
            <div class="container-fluid" style="border:gray solid 1px ">
                <div class="row">
                    <div class="col-md-2 col-md-offset-3"> </div>
                </div>
                <div class="row" style="background: #d2ffa9;height: 50px">
                    <div id="selector1" style="font-size: large;" class="col-md-offset-1">
                        收支排行
                    </div>
                    <div style="font-size: large;" class="col-md-2"   >
                        <select id="select2">
                            <option value="0">全部</option>
                            <option value="2021">2021</option>
                            <option value="2020">2020</option>
                            <option value="2019">2019</option>
                        </select>
                    </div>
                </div>
                <div>
                    <table id="pname" class="table table-bordered">
                    </table>
                </div>

            </div>

        </main>
    </div>
</div>

<script>
    var userId = location.href.split('?userId=')[1];
    var selector= $('<select id="select1"><option value="0">全部</option></select>');
    for (var i=1;i<=12;i++){
        selector.append('<option value="'+i+'">'+i+'月</option>')
    };
    $("#selector1").append(selector);
  // 基于准备好的dom，初始化echarts实例
  var myChart1 = echarts.init(document.getElementById('main1'));
    var img=1;
  getMoneyByDate();
    // 时间统计
    function getMoneyByDate() {
        getOrderType();
        $("#page").empty();
        var dataEL={'userId':userId};
        $.ajax({
            type:"get",
            url:"money/getMoneyByDate",
            data: dataEL,
            success:function (data) {
                if (data.code==201){
                    alert(data.status_desc)
                }else {
                var datas;
                var dataName;
                var textName;
                if (img == 1) {
                    textName = "收入";
                    dataName = data.data.z.name;
                    datas = data.data.z.value;
                } else if (img == 2) {
                    textName = "支出";
                    dataName = data.data.f.name;
                    datas = data.data.f.value;
                } else {
                    textName = "总消费";
                    dataName = data.data.sum.name;
                    datas = data.data.sum.value;
                }
                // 指定图表的配置项和数据
                var option1 = {
                    title: {
                        text: textName
                    },
                    tooltip: {},
                    legend: {
                        data: ['金额']
                    },
                    xAxis: {
                        data: dataName
                    },
                    yAxis: {},
                    series: [{
                        name: '金额',
                        type: 'bar',
                        data: datas
                    }]
                };
// 使用刚指定的配置项和数据显示图表。
                myChart1.setOption(option1);
            }
            },
            error:function(data){
                alert('服务器内部错误！');
            },
        });
    }

    function getOrderType(){
        $("#pname").empty();
        var dataEL={'userId':userId,'pmonth':$("#select1").val(),'pyear':$('#select2').val()};
        $.ajax({
            type:"get",
            url:"money/getOrderType",
            data: dataEL,
            success:function (data) {
                if (data.code==201){
                    alert(data.status_desc)
                }else {
                    var tr = $('<tbody></tbody>');
                    var th = $('<thead><tr><th>编号</th><th>来源</th><th>时间</th><th>开销</th></tr></thead>');
                    var dataCo;
                    if (img == 1) {
                        dataCo = data.data.get;
                    } else if (img == 2) {
                        dataCo = data.data.pay;
                    }
                    for (var i = 0; i < dataCo.length; i++) {
                        var pn = dataCo[i].way == 1 ? '-' : '+';
                        var tempLi = '<tr><td>' + (i + 1) + '</td>' + '<td>' + dataCo[i].typeName + '</td>'
                            + '<td>' + dataCo[i].pyear + "-" + dataCo[i].pmonth + '</td>' + '<td>' + pn + dataCo[i].payMoney + '</td></tr>';
                        tr.append(tempLi);
                    }
                    ;
                    $("#pname").append(th).append(tr)
                }
            },
            error:function(data){
                alert('服务器内部错误！');
            },
        });
    }




</script>
</body>

</html>
